<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>违章查询</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
    <!--<script src="http://vuejs.org/js/vue.min.js"></script>-->
    <!--<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>-->
    <!--<script src='http://app.lxh.magcloud.cc/public/static/dest/js/libs/magjs-x.js'></script>-->
    <!--<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>-->
    <!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <!--<script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>-->
</head>
<body>
<div id="app">
<template>
  <van-cell-group>
      <van-cell v-if="list.length > 0" v-for="item in list"
        :title="item.car_name"
        :label="item.car_model" 
        :url="`violationResults.html?cc=${item.car_code}&ec=${item.engine_code}&sc=${item.class_code}`" is-link>
        <!-- <div class="cont"><img class="licon" slot="icon" :src="item.car_pic"></div> -->
        <img class="licon" slot="icon" :src="item.car_pic">
      </van-cell>
      <van-cell v-if="list.length == 0" class="divtip">
        <div class="cont">
          <img :src="tipico" class="ximg">
          <p>暂无车辆，快去添加吧~</p>
        </div>
      </van-cell>
  </van-cell-group>
  <div class="btn"><van-button plain hairline type="default" size="large" url="authentication.html" >添加车辆</van-button></div>

  <van-cell-group>
    <van-cell title="车牌号">
        <div class="plateNumberBox">
          <span class="provincegrounp" @click="chooseNumber"><span v-text="proDefault"></span><van-icon name="arrow" /></span>
          <van-field class="number" v-model="plateNumber" required />
        </div>
    </van-cell>
    <van-cell><van-field label="发动机号" class="textinput" v-model="engineno" input-align="right" clearable required placeholder="请输入发动机号" /></van-cell>
    <van-cell><van-field label="车架号" class="textinput" v-model="classno" input-align="right" clearable required placeholder="请输入车架号" /></van-cell>
  </van-cell-group>
  <div class="bt"><van-button type="info" size="large" @click="query">立即查询</van-button></div>

  <van-popup class="province" v-model="show" position="bottom" :overlay="true">
    <van-picker :columns="province" show-toolbar title="简称" @cancel="onCancel" @confirm="onConfirm" />
  </van-popup>
</template>
</div>
<script src="../../../resource/js/vue.min.js"></script>
<script src="../../../resource/js/vant.min.js"></script>
<script src="../../../resource/js/magjs-x.js"></script>
<script src="../../../resource/js/vue-router.js"></script>
<script src="../../../resource/js/axios.min.js"></script>
<script src="../../../resource/js/qs.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            title: '选择车辆',
            list: [],
            tipico: 'http://download.bihuapp.com/icon/pic.png',
            token: '',
            plateNumber: '',
            province: ['京', '津', '冀', '晋', '蒙', '辽', '吉', '黑', '沪', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '桂', '琼', '川', '贵', '云', '渝', '藏', '陕', '甘', '青', '宁', '新', '港', '澳', '台'],
            proDefault: '鲁',
            show: false,
            engineno:'',
            classno: ''
        },
        created () {
          mag.toLogin(function(rs) {
            this.token = rs.token
            localStorage.setItem('token', rs.token)
          })
            this.getCarList()
        },
        methods: {
          chooseNumber () {
            this.show = true
          },
          onCancel (e) {
            this.show = false
          },
          onConfirm (value, index) {
            this.proDefault = value
            this.show = false
          },
          getCarList () {
              let that = this
              let postparams = {
                token: localStorage.getItem('token'),
              }
              axios.post('/CarInfo/getUserCarInfoList', postparams).then(({data}) => {
                if (data.code === 200) {
                  that.list = data.data
                } else {
                  that.list = ''
                }
              })
          },
          query () {
            let carPalte = this.proDefault + this.plateNumber
            let carCode = this.plateNumber.trim().toUpperCase()
            let city = carCode.substring(0,1)
            console.log(city)
            let ec = this.engineno
            let sc = this.classno
            if(!carCode || !ec || !sc) {
              this.$toast.fail('请输入完整信息')
            } else {
              if(city == 'M'){
                window.location.href="violationResults.html?cc=" + carPalte + "&ec=" + ec + "&sc=" + sc
              } else {
                this.$toast('暂时只支持滨州用户')
              }
            }
          }
        }
    })
  </script>
<style scoped>
.bt{
  margin: 10px auto;
  text-align: center;
  padding: 0 15px;
}
.white{
  fill: #fff;
}

.tap{
  font-size: 14px;
  color: #808080;
  padding: 10px;
}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}

.agree{
  font-size: 12px;
  padding: 15px 10px;
}

.foottip{
  font-size: 12px;
  position: fixed;
  bottom: 15px;
}
.divtip{
  text-align: center;
}

.licon {
  width: 60px;
  height: 60px;
  background-color: #F4F8FA;
  margin-right: 8px;
}
.ximg{
    max-width: 40%;
    display: block;
    margin: 10px auto;
}
p{
  font-size: 14px;
  text-align: center;
}

.plateNumberBox{
  height: 32px;
  /* background-color: #42b983 */
  position: relative;
  border: solid 1px #4F91F2; 
  border-radius: 3px;
  width: 162px;
  float: right;
}
.number {
  box-sizing: border-box;
  padding: 3px 15px 3px 70px;  
  text-align: center;
}
.number .van-field__control{
  color: #4F91F2;
  font-size: 14px;
}
.provincegrounp {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #4F91F2;
  padding: 5px 3px 4px;  
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  width: 55px;
  height: 32px;
  z-index: 9;
  color: #fff;
  text-align: center;
}
.provincegrounp>.van-icon{
  position: relative;
  top: 2px;
  left: 2px;
}

.province{
  color: #fff;
  font-size: 16px;  
}

</style>
</body>
</html>